<template>
  <div class="calendar-scheduler">
    <div class="calendar-header">
      <button class="nav-btn" @click="prevMonth">{{ prevMonthYear.month }} {{ prevMonthYear.year }}</button>
      <span class="current-month">{{ currentMonthYear.month }} {{ currentMonthYear.year }} 日程安排</span>
      <button class="nav-btn" @click="nextMonth">{{ nextMonthYear.month }} {{ nextMonthYear.year }}</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-week-header">
        <div v-for="day in weekDays" :key="day" class="calendar-day-header">{{ day }}</div>
      </div>
      <div v-for="(days, index) in calendarDays" :key="index" class="calendar-week">
        <div
          v-for="day in days"
          :key="day.date"
          :class="[
            'calendar-day',
            { 'today': isToday(day.date) },
            { 'has-shift': hasShift(day.date) }
          ]"
          @click="toggleShift(day.date)"
        >
          <div class="day-number">{{ day.day }}</div>
          <div v-if="hasShift(day.date)" class="shift-info">{{ getShiftInfo(day.date) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      // 可能需要根据日期值查询这一整个月的日程安排
      shifts: {}, // 存储日程信息的对象，键是日期，值是排班详情
    };
  },
  computed: {

    currentMonthYear() {
      const { year, month } = this.currentDate;
      return { year, month: this.formatMonth(month) };
    },
    prevMonthYear() {
      const prevDate = new Date(this.currentDate);
      prevDate.setMonth(prevDate.getMonth() - 1);
      return {
        year: prevDate.getFullYear(),
        month: this.formatMonth(prevDate.getMonth()),
      };
    },
    nextMonthYear() {
      const nextDate = new Date(this.currentDate);
      nextDate.setMonth(nextDate.getMonth() + 1);
      return {
        year: nextDate.getFullYear(),
        month: this.formatMonth(nextDate.getMonth()),
      };
    },
    weekDays() {
      return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    },
    calendarDays() {
      const firstDayOfMonth = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
      const lastDayOfMonth = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0);
      const firstDayOfWeek = firstDayOfMonth.getDay();
      const daysInMonth = lastDayOfMonth.getDate();
      const totalDays =
        Math.ceil((daysInMonth + firstDayOfWeek) / 7) * 7 - (firstDayOfWeek === 0 ? 0 : firstDayOfWeek - 1);

      const calendarDays = [];
      for (let i = 0; i < Math.ceil(totalDays / 7); i++) {
        calendarDays.push(
          Array.from(
            { length: 7 },
            (_, j) => ({
              date: new Date(
                this.currentDate.getFullYear(),
                this.currentDate.getMonth(),
                i * 7 + j - firstDayOfWeek + (i * 7 + j < firstDayOfWeek ? daysInMonth - totalDays % 7 + 1 : 1)
              ),
              day: this.formatDay(new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), i * 7 + j - firstDayOfWeek + (i * 7 + j < firstDayOfWeek ? daysInMonth - (totalDays % 7) + 1 : 1)).getDate()),
            })
          )
        );
      }
      return calendarDays;
    },
  },
  methods: {
    formatMonth(month) {
      return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][month];
    },
    formatDay(day) {
      return day.toString().padStart(2, '0');
    },
    isToday(date) {
      const today = new Date();
      return (
        date.getFullYear() === today.getFullYear() &&
        date.getMonth() === today.getMonth() &&
        date.getDate() === today.getDate()
      );
    },
    hasShift(date) {
      return this.shifts[this.formatDateAsKey(date)];
    },
    getShiftInfo(date) {
      return this.shifts[this.formatDateAsKey(date)];
    },
    toggleShift(date) {
      const dateKey = this.formatDateAsKey(date);
      if (this.hasShift(date)) {
        delete this.shifts[dateKey];
      } else {
        this.shifts[dateKey] = 'Shift'; // 示例排班信息
      }
    },
    formatDateAsKey(date) {
      return `${date.getFullYear()}-${this.formatMonth(date.getMonth())}-${this.formatDay(date.getDate())}`;
    },
    prevMonth() {
      const prevDate = new Date(this.currentDate);
      prevDate.setMonth(prevDate.getMonth() - 1);
      this.currentDate = prevDate;
    },
    nextMonth() {
      const nextDate = new Date(this.currentDate);
      nextDate.setMonth(nextDate.getMonth() + 1);
      this.currentDate = nextDate;
    },
  },
};
</script>

<style scoped>
.calendar-scheduler {
  width: 800px; /* 增大组件尺寸 */
  margin: 0 auto;
  border: 2px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f3f4f6;
  border-bottom: 2px solid #ddd;
}

.nav-btn {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.nav-btn:hover {
  background-color: #2563eb;
}

.current-month {
  font-size: 20px;
  font-weight: bold;
}

.calendar-body {
  padding: 20px;
}

.calendar-week-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
}

.calendar-week {
  display: flex;
  flex-wrap: wrap;
}

.calendar-day {
  width: 14.28%; /* 7 days in a week, so 100% / 7 */
  box-sizing: border-box;
  text-align: center;
  padding: 15px 0;
  border: 1px solid #e4e4e7;
  cursor: pointer;
  position: relative;
  overflow: hidden; /* 为了确保伪元素的边界不会超出 */
  transition: transform 0.3s, box-shadow 0.3s; /* 增加box-shadow的过渡效果 */
}
.calendar-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* 浅色背景，增加卡片效果 */
  border-radius: 10px; /* 圆角边框 */
  z-index: -1; /* 确保伪元素在日期下方 */
  transform: scale(0); /* 初始状态缩放为0 */
  transition: transform 0.3s; /* 过渡效果 */
}

.calendar-day:hover::before {
  transform: scale(1); /* 鼠标悬停时缩放为1 */
}

.calendar-day:hover {
  transform: scale(1.1); /* 鼠标悬停时放大日期 */
  z-index: 10; /* 确保悬停的日期在最上方 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 当鼠标悬停在日期上时，周围日期的样式 */
.calendar-day:hover + .calendar-day::before,
.calendar-day:hover ~ .calendar-day::before {
  transform: scale(0.9); /* 周围日期稍微放大 */
}

/* 今天的样式 */
.today::before {
  background-color: rgba(255, 235, 59, 0.3); /* 更浅的黄色背景 */
}

/* 有日程安排的样式 */
.has-shift::before {
  background-color: rgba(76, 175, 80, 0.3); /* 更浅的绿色背景 */
}
.calendar-day:hover {
  background-color: #e0f7fa;
  transform: scale(1.05);
}

.calendar-day-header {
  width: 14.28%;
  padding: 15px 0;
  text-align: center;
  font-weight: bold;
}

.today {
  background-color: #ffeb3b;
  font-weight: bold;
}

.has-shift {
  background-color: #4caf50;
  color: white;
  font-weight: bold;
}

.shift-info {
  margin-top: 10px;
  font-size: 1em;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 5px;
}

.day-number {
  font-size: 18px;
  font-weight: bold;
}
</style>
